<template>
	<view class="container">
		<nv :config="config"></nv>
		<image src="../static/img/vip-bg0.png" class="vip-bg0"></image>
		<image src="../static/img/vip-bg1.png" class="vip-bg1"></image>
		<view class="flex f-column vip-balance">
			<text class="font32 yellow bold">{{
				userInfo.isMember == '会员'
					? '尊贵的VIP会员'
					: '充值后成为尊贵的VIP会员'
			}}</text>
			<view
				v-if="userInfo.isMember == '会员'"
				class="flex f-align-end font22 white bold mt50"
			>
				当前余额：
				<text class="font22 yellow">￥</text>
				<text class="font36 yellow">{{ userInfo.remainingSum }}</text>
			</view>
		</view>

		<view class="flex f-column f-align vip-fixed">
			<view class="xf-go font28 yellow" @click="$api.toPage('./xfList')">
				消费明细
				<text class="zlicon icon-right ml10 font22"></text>
			</view>
			<view class="flex wrap scroll-view_H">
				<view
					v-for="(item, index) in dataList"
					:key="index"
					class="vip-box"
					:class="{ active: topUpId == item.id }"
					@click="selectHandle(item)"
				>
					<view class="font24">{{
						item.givingAwaySum == '0.00' ? '现价' : '活动价'
					}}</view>
					<view class="box-money mt10">
						<text class="font40">￥</text>
						<text>{{ item.topUpSum }}</text>
					</view>
					<view class="font24 mt10"
						>到账：{{
							(
								parseFloat(item.topUpSum) + parseFloat(item.givingAwaySum)
							).toFixed(2)
						}}元</view
					>
					<view
						class="song-box white f-center"
						v-if="item.givingAwaySum != '0.00'"
						>送{{ item.givingAwaySum }}元</view
					>
				</view>
			</view>
			<view class="vip-btn f-center font36" @click.stop="buyHandle"
				>立即充值</view
			>
		</view>
	</view>
</template>

<script>
import nv from '@/components/pyh-nv/pyh-nv.vue'
import { mapState, mapMutations } from 'vuex'
export default {
	data() {
		return {
			config: {
				title: '会员中心',
				// bgColor: 'rgba(0,0,0,0)',
				color: '#ffffff',
				hideback: false
			},
			dataList: [],
			topUpId: '',
			totalMoney: 0
		}
	},
	computed: {
		...mapState(['userInfo'])
	},
	components: {
		nv
	},
	onLoad() {
		this.getDataList()
	},
	onShow() {
		this.getUserInfo()
	},
	methods: {
		...mapMutations(['login']),
		getUserInfo() {
			this.$http
				.ajax({
					url: '/User/wxSelect',
					params: {
						openId: uni.getStorageSync('openId')
					}
				})
				.then((res) => {
					if (res.code == 0) {
						uni.setStorageSync('userInfo', res.data[0])
						this.login(res.data[0])
					}
				})
		},
		buyHandle() {
			if (!this.topUpId) {
				this.$api.msg('请选择充值套餐')
				return
			}

			uni.showLoading({
				title: '请求中，请稍后...',
				mask: true
			})

			let _this = this
			this.$http
				.ajax({
					url: '/pay/topUp',
					params: {
						openId: uni.getStorageSync('openId'),
						topUpId: this.topUpId
					}
				})
				.then((res) => {
					uni.hideLoading()
					if (res.code == 200) {
						const {
							timeStamp,
							nonceStr,
							package: ppackage,
							paySign
						} = Object.assign({}, res.data)
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: timeStamp,
							nonceStr: nonceStr,
							package: ppackage,
							signType: 'MD5',
							paySign: paySign,

							success: (e) => {
								_this.$api.msg('支付成功')
							},
							fail: (e) => {
								_this.$api.msg('支付失败')
							}
						})
					} else {
						this.$api.msg(res.msg)
					}
				})
		},
		selectHandle(item) {
			this.topUpId = item.id
		},
		getDataList() {
			this.$http
				.ajax({
					url: '/TopUpSetting/list',
					params: {}
				})
				.then((res) => {
					if (res.code == 200) {
						this.dataList = res.data
					}
				})
		}
	}
}
</script>

<style scoped lang="scss">
.container {
	padding: 0;
	background: #252531;
	position: relative;

	.vip-bg0 {
		position: fixed;
		top: 135rpx;
		left: 0;
		width: 100%;
	}

	.vip-bg1 {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 700rpx;
	}

	.vip-balance {
		position: fixed;
		left: 88rpx;
		top: 330rpx;
	}

	.xf-go {
		align-self: flex-end;
		margin-bottom: 20rpx;
		padding-right: 42rpx;
	}

	.vip-fixed {
		width: 750rpx;
		position: fixed;
		left: 0;
		top: 580rpx;
		z-index: 99;
	}

	.scroll-view_H {
		width: 100%;
		padding: 0 36rpx;
	}

	.vip-box {
		width: 206rpx;
		height: 230rpx;
		background: linear-gradient(0deg, #f2f2f2, #f9f9f9);
		border-radius: 10rpx;
		color: #5a4213;
		position: relative;
		padding: 36rpx 0 32rpx;
		display: inline-block;
		text-align: center;
		margin: 0 10rpx 20rpx;
	}

	.active {
		background: #fbe9d3;
	}

	.box-money {
		font-size: 56rpx;
		font-weight: bold;
		color: #ff6040;
		line-height: 70rpx;
	}

	.song-box {
		width: 107rpx;
		height: 27rpx;
		background: #ff6040;
		border-radius: 9rpx 0rpx 9rpx 0rpx;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 10;
		font-size: 20rpx;
	}

	.vip-btn {
		width: 536rpx;
		height: 90rpx;
		background: linear-gradient(90deg, #f8d9ad, #e9b87a);
		border-radius: 40rpx;
		color: rgba(34, 34, 46, 1);
		margin: 80rpx auto 0;
	}

	::v-deep .nvBox {
		background: rgba(0, 0, 0, 0) !important;
	}
}
</style>
